<!-- html 模板界面  -->
<!-- 
    计算总价
-->

<template>
	<div>
		<h2>购物车</h2>
		<GoodsItem v-for="item in list" :key="item.id" :good="item" @onDeleteGood="bindDelete"/>
		<TotalPriceCom :total="total" />
	</div>
</template>

<!-- javascript代码业务逻辑 -->
<script setup>
import { computed, ref } from 'vue'
import TotalPriceCom from '@/components/TotalPriceCom.vue'
import GoodsItem from '@/components/GoodsItem.vue'

const list = ref([
	{ id: 1001, name: '回锅肉', price: 18.88, num: 1 },
	{ id: 1002, name: '鱼香肉丝', price: 23.28, num: 1 },
	{ id: 1003, name: '清酒肉丝', price: 38.15, num: 2 },
])

// 删除
const bindDelete = id => {
	console.log('id :',id);
	
	const index = list.value.findIndex(item=>item.id == id)
	list.value.splice(index, 1)
}

/**
 * 计算总价
 */
const total = computed(() => {
	let sum = list.value.reduce((previous, current) => previous + current.price * current.num, 0)
	return sum.toFixed(2)
})
</script>

<!-- css样式 -->
<style lang="css" scoped>
.btn {
	border: none;
	background-color: blueviolet;
	color: wheat;
	width: 100px;
	height: 30px;
}
input {
	height: 30px;
	margin-right: 10px;
}
</style>
